<template>
  <div>
    <div class="pagetitle" style="background-color: #fff" v-if="showtitle">
      <!-- 双页面tabs -->
      <div v-if="showtabs">
        <a-tabs :default-active-key="activekey" @change="callback">
          <template v-for="item in tabs">
            <a-tab-pane :key="item.path" :tab="item.name">
            </a-tab-pane>
          </template>
        </a-tabs>
      </div>
      <!-- 单页面tab -->
      <span v-else>{{ title }}</span>
    </div>
  </div>
</template>
<script>
import { MoreTab } from './tabs'
export default {
  data() {
    return {
      title: '',//页头名称--从路由获取
      showtitle: true, //系统设置页面隐藏title---改值为false-->隐藏
      tabs: [],//双页面中所需要的渲染的页面数组
      activekey: '',//双页面tabs默认被选项的key
      showtabs:false//双页面为---true,单页面为---false
    }
  },
  computed: {},
  watch: {
    $route(to, from) {
      this.gettitle()
      this.getTabchile()
      this.activekey=this.$route.path
    },
  },
  mounted() {
    this.gettitle()
    this.getTabchile()
    this.activekey=this.$route.path//设置当前双页面tabs默认选项
  },
  methods: {
    gettitle() {
      this.title = this.$route.meta.title
      this.title == '系统设置' ? (this.showtitle = false) : (this.showtitle = true)//如果是系统设置则隐藏tab-tittle
    },
    callback(key) {
      this.$router.push(key)
    },
    getTabchile() {
      for (let index = 0; index < MoreTab.length; index++) {
        const x = MoreTab[index]      
        if (x.titlePath.indexOf(this.$route.path) != -1) {//查找当前路径是否在tabs.js中配置双页面
          this.tabs = x.child //tabs-item
          this.showtabs=true //显示双页面tabs
          break
        } else {
          this.tabs = []//没有tabs-item
           this.showtabs=false//显示单页面tab
        }
      }
    },
  },
}
</script>
<style lang="less">
.pagetitle {
  min-height: 56px;
  padding: 0 24px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 18px;
  background: transparent;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 2px 2px 0 0;
  line-height: 56px;
  .ant-tabs-bar {
    margin-bottom: 0px;
    height: 56px;
    border-bottom: none;
  }
  .ant-tabs-nav .ant-tabs-tab {
    padding: 15.5px 16px;
    font-size: 18px;
    font-weight: 400;
  }
}
</style>